<template>
	<view class="container">
		<u-navbar :title="$t('home.withdrawal')" placeholder bgColor="#12be98" leftIconColor="#FFFFFF"
			rightIcon="plus-circle" titleStyle="color: #FFFFFF" autoBack @rightClick="rightClick">
		</u-navbar>

		<view class="content">
			<view class="quk-card">
				<view class="mar-bottom-15 font-42">
					{{store.userInfo.balance}} <text class="font-24 color_929292">USDT</text>
				</view>
				<view class="font-26 color_929292">{{$t('home.wallet_balance')}}</view>
			</view>

			<view class="wt-panel">
				<view class="wt-input_items">
					<view class="font-26 mar-bottom-20">
						{{$t('home.money')}} <text class="color_929292 font-24">（ USDT ）</text>
					</view>
					<up-input :placeholder="$t('home.please_withdrawal_amount')" v-model="formData.amount"
						color="#fc7831" @change="handleInput" border="surround"></up-input>
				</view>

				<view class="tri-cellss mar-top-25 font-28">
					{{$t('home.minimum_withdrawal_amount')}}{{configurationItem.user_withdrawal_min}}USDT <br />
					{{$t('home.withdrawal_single_currency')}}{{configurationItem.user_withdrawal_charge}}USDT <br />
					{{$t('home.the_number_withdrawals_exceed')}}{{configurationItem.user_withdrawal_maxtimes}}{{$t('home.second')}} <br />
					{{$t('home.daily_not_exceeding')}}{{configurationItem.user_withdrawal_max}}USDT
				</view>

				<view class="mar-top-13">
					<up-radio-group activeColor="#0184FA" v-model="formData.chain_type" shape="square"
						iconPlacement="right">
						<view class="radio-boxes" v-for="(item, index) in routeList" :key="index">
							<view class="flex align-center">
								<image src="/static/image/network.png" mode="" />
								<text class="font-28 mar-left-15 mar-right-10">{{item.chain_type}}</text>
								<text class="color_DD4A68 font-24">{{$t('home.recommendation')}}</text>
							</view>
							<up-radio :name="item.chain_type"></up-radio>
						</view>
					</up-radio-group>
				</view>
			</view>

			<view class="mar-top-80">
				<up-button color="#ffc820" :customStyle="customStyle" @click="handConfirm">{{$t('confirm')}}</up-button>
			</view>
		</view>

		<up-popup :show="visibleWallet" mode="bottom" @close="visibleWallet = false">
			<view class="popup-content">
				<view class="popup-head">
					<view></view>
					<text>{{$t('home.please_select_wallet_address')}}</text>
					<up-icon @click="visibleWallet = false" name="close-circle" color="#ffffff" size="24"></up-icon>
				</view>

				<scroll-view scroll-y class="scroll-list">
					<up-radio-group activeColor="#0184FA" v-model="formData.wallet_id" shape="square"
						iconPlacement="right">
						<view class="radio-boxes" v-for="(item, index) in walletList" :key="index">
							<view class="flex flex-direction">
								<text class="font-30">{{item.username}}</text>
								<text class="font-28 color_929292">{{address2simple(item.wallet_address,10)}}</text>
							</view>
							<up-radio :name="item.id"></up-radio>
						</view>
					</up-radio-group>
				</scroll-view>

				<view class="mar-top-50 pad-left-right-40">
					<up-button color="#ffc820" :customStyle="customStyle" @click="submit">{{$t('confirm')}}</up-button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import {
		useStore
	} from '@/store/commonStore'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		rechargeChannel,
		walletAll
	} from '@/api/user'
	import {
		withdrawalApply,
		getSetting
	} from '@/api/index'
	import {
		address2simple
	} from '@/util/commonFunction'

	const store = useStore()
	const {
		t
	} = useI18n()
	const routeList = ref([])
	const configurationItem = ref({
		user_withdrawal_min: "", // 每日最低提现金额
		user_withdrawal_max: "", //每日最高提现金额
		user_withdrawal_charge: "", //单次提现手续费
		user_withdrawal_maxtimes: "", // 单日最大提现次数
	})
	const formData = ref({
		amount: configurationItem.value.user_withdrawal_min || "10",
		chain_type: "",
		wallet_id: ""
	})
	const visibleWallet = ref(false)
	const walletList = ref([])

	const customStyle = {
		color: '#000000',
		borderRadius: '20rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}

	const generalConfiguration = async () => {
		let params = ["user_withdrawal_min", "user_withdrawal_max", "user_withdrawal_charge",
			"user_withdrawal_maxtimes"
		]
		params.forEach(async (item) => {
			const res = await getSetting({
				codes: [item]
			})
			const result = res.data.setting
			switch (item) {
				case "user_withdrawal_min":
					configurationItem.value.user_withdrawal_min = result.user_withdrawal_min
					break;
				case "user_withdrawal_charge":
					configurationItem.value.user_withdrawal_charge = result.user_withdrawal_charge
					break;
				case "user_withdrawal_maxtimes":
					configurationItem.value.user_withdrawal_maxtimes = result.user_withdrawal_maxtimes
					break;
				case "user_withdrawal_max":
					configurationItem.value.user_withdrawal_max = result.user_withdrawal_max
					break;

				default:
					break;
			}
		})
	}

	const rightClick = () => {
		uni.navigateTo({
			url: '/pages/my_actions/card-list/card-list'
		})
	}
	// 限制输入框的值
	const handleInput = (event) => {
		let inputValue = event; // 从事件对象中获取输入的值
		// 只允许输入数字和小数点
		inputValue = inputValue.toString().replace(/[^0-9.]/g, "");
		// 限制小数点后面最多4位
		const decimalIndex = inputValue.indexOf(".");
		// 获取精度
		const decimals = 4;
		if (decimalIndex !== -1) {
			const decimalPart = inputValue.substring(decimalIndex + 1);
			if (decimalPart.length > decimals) {
				inputValue = inputValue.substring(0, decimalIndex + decimals + 1);
			}
		}

		// 更新输入框的值
		formData.value.amount = inputValue;
	};
	//获取可选择的线路
	const handSelectRoute = async () => {
		const res = await rechargeChannel()
		routeList.value = res.data.lists
		formData.value.chain_type = routeList.value[0].chain_type
	}
	// 获取钱包列表
	const getWalletList = async () => {
		const res = await walletAll()
		if (res.data.lists.length <= 0 || !res.data.lists) {
			uni.$u.toast(t('home.please_wallet_first'))
			uni.navigateTo({
				url: '/pages/my_actions/card-list/card-list'
			})
			return
		}
		walletList.value = res.data.lists
		formData.value.wallet_id = res.data.lists[0].id
		visibleWallet.value = true
	}

	const handConfirm = () => {
		if (Number(formData.value.amount) < Number(configurationItem.value.user_withdrawal_min)) return uni.$u.toast(
			t('home.single_withdrawal_amount_cannot'))
		getWalletList()
	}

	// 确认提现
	const submit = async () => {
		const res = await withdrawalApply({
			...formData.value
		})
		if (res.code === 200) {
			visibleWallet.value = false
			return uni.$u.toast(t('home.application_successful'))
		}
	}

	onLoad(() => {
		generalConfiguration()
		handSelectRoute()
	})
</script>

<style lang="scss" scoped>
	:deep(.u-input) {
		height: 45px;
		border-radius: .19324vw;
		background: #fff;
		border: .02415vw solid #979797;
		box-sizing: border-box;
	}

	:deep(.u-icon__icon) {
		color: #ffffff !important;
	}

	.radio-boxes {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 100%;
		padding: 3.6232vw;
		border-radius: 1.9324vw;
		margin-bottom: 2.4155vw;
		background-color: #ffc820;
		box-sizing: border-box;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}


	.container {
		min-height: 100vh;
		background: url('/static/image/topbg.png') top no-repeat;
		background-size: contain;

		.content {
			padding: 3.6232vw;
			box-sizing: border-box;

			.quk-card {
				padding: 5.314vw;
				line-height: 1;
				border-radius: 2.4155vw;
				margin-bottom: 3.8647vw;
				background: #fff;
				box-shadow: 0 1.2077vw 4.8309vw rgba(59, 72, 92, .14);
			}

			.wt-panel {
				padding: 3.6232vw;
				border-radius: 3.8647vw;
				background: #fff;

				.tri-cellss {
					line-height: 1.5;
				}
			}
		}
	}

	.popup-content {
		min-height: 600rpx;
		padding-bottom: 40rpx;

		.popup-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			padding: 24rpx 40rpx;
			text-align: center;
			background-color: #0F0F0E;
			color: #ffffff;
		}

		.scroll-list {
			height: 486rpx;
			padding: 0 40rpx;
			padding-top: 30rpx;
			box-sizing: border-box;
		}
	}
</style>